<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>空托盘入库</title>
    <!--    <script type="text/javascript" src="static/js/jquery.min.js"></script>-->
    <script th:src="@{/js/jquery.min.js}"></script>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        font-size: 15px;
    }

    .div {
        text-align: center;
        margin: 0 auto;
        border: black solid 1px;
        width: 80%;
        height: 80%;
        padding: 10px;
    }

    .label {
        text-align-last: justify;
        text-align: justify;
        text-justify: distribute-all-lines;
    / / 这行必加，兼容ie浏览器
    }

    .tr {
        height: 30px;;
    }

    /*.ti
    tle{*/
    /*    width: 80%;*/
    /*    height: 40%;*/
    /*    text-align: left;*/
    /*    line-height: 10%;*/
    /*}*/
    /*body, td, th {*/
    /*    font-family: Verdana, Arial, Helvetica, sans-serif;*/
    /*    font-size: 65px;*/
    /*}*/

    /*input[type="text"] {*/
    /*    height: 30%;*/
    /*    border: 2px solid #000000;*/
    /*    padding: 0 6px;*/
    /*    width: 60%;*/
    /*    font-size: 60px;*/
    /*}*/

    input[type="button"] {
        height: 15%;
        border: 2px solid #545454;
        border-radius: 5px;
        padding: 3px 6px;
        width: 30%;
        font-size: large;
        margin: 9px 9px auto;


    }

    /*select {*/
    /*    border: 2px solid #000000;;*/
    /*    width: 60%;*/
    /*    height: 40%;*/
    /*    font-size: 60px;*/
    /*    background-color: #ffffff;*/
    /*}*/

</style>
<body>

<div class="div">
    <div class="title" style="text-align: center">
        <h3>空托盘入库</h3>
    </div>
    <hr>
    <div style="display: inline-block;margin: auto 0">
        <table>
            <tr class="tr">
                <td align="right">
                    <div class="label">托盘类型：</div>
                </td>
                <td align="left">
                    <select type="text" id="type" name="onLineType" style="width: 170px;height: 25px;">-->
                        <option value="TPR">空托盘</option>
                    </select>
            </tr>
            <tr class="tr">
                <td align="right">
                    <div class="label">托盘编码：</div>
                </td>
                <td align="left"><input type="text" id="trayCode"></td>
            </tr>
            <tr class="tr">
                <td align="right">
                    <div class="label">数量：</div>
                </td>
                <td align="left"><input type="text" id="quantity"></td>
            </tr>
            <tr class="tr">
                <td align="right">
                    <div class="label">入口号：</div>
                </td>
                <td align="left"><input type="text" id="entranceId"></td>
            </tr>
            <!--            <tr class="tr">-->
            <!--                <td align="right"><div class="label">输送机口号：</div></td>-->
            <!--                <td align="left">-->
            <!--                    <select type="text" id="entranceId" name="entranceId" style="width: 170px;height: 25px;">-->
            <!--                        <option value="1">入口1</option>-->
            <!--                        <option value="2">入口2</option>-->
            <!--                        <option value="3">入口3</option>-->
            <!--                    </select>-->
            <!--                </td>-->
            <!--            </tr>-->
        </table>
        <input type="button" id="but" value="提交" onclick="ktpIn()">
    </div>

</div>
</body>
<script>
    var url = "/pda"

    function ktpIn() {
        var type = $("#type").val();
        var trayCode = $("#trayCode").val();
        var quantity = $("#quantity").val();
        var entranceId = document.getElementById("entranceId").value;

        if (trayCode == "" || trayCode == undefined) {
            alert("提交失败,请输入托盘条码！");
            return;
        }
        if (quantity == "" || quantity == undefined) {
            alert("提交失败,请输入入库数量！");
            return;
        }
        // if (entranceId == "" || entranceId == undefined) {
        //     alert("提交失败,请输入入口号！");
        //     return;
        // }

        if (trayCode.length != 8) {
            alert("托盘条码不规范，请核对！");
            return;
        }

        //控制按钮多次点击
        var btn = document.getElementById('but');//首先需要获取的是哪一个按钮的id
        btn.disabled = 'disabled';//只要点击就将按钮的可点击的状态更改为不可以点击的状态
        setTimeout(function () {//设置时间，多久可以改变状态为可以点击
            btn.disabled = '';
        }, 5000);


        // $.ajax({
        //     url: url + "/trayIn",
        //     data: {
        //         "onLineType": onLineType,
        //         "trayCode": trayCode,
        //         "quantity": quantity,
        //         "entranceId": entranceId
        //     },
        //     type: "post",
        //     dataType: "json", //返回数据的类型
        //     success: function (result) {
        //         alert(result.msg)
        //         window.location.reload();
        //     }
        // })

        $.ajax({
            url: "/pda/trayIn",
            method: "POST",
            data: JSON.stringify({
                type: type,
                trayCode: trayCode,
                quantity: quantity,
                entranceId: entranceId
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                // 处理响应结果

                // 弹出处理成功的提示框
                alert(result.msg);

                // 清除输入框内容
                $("#onLineType").val("");
                $("#trayCode").val("");
                $("#quantity").val("");
                $("#entranceId").val("");
                // console.log(result);
            },
            error: function (xhr, status, error) {
                // 处理错误信息
                console.log(error);
                alert("生成空托盘作业失败");
            }
        });
    }


</script>
</html>